<template>
	<div class="header" :class="fixed">
		<div class="main-wrap">
			<div class="header-top" v-show="fixed == 'static'">
				<div class="logo">
					<img src="@/assets/images/logo.png" alt="我的商城" />
				</div>
				<SearchPart class="search-1" />
			</div>
			<div class="header-bottom">
				<NavPart />
				<SearchPart class="search-2" v-show="fixed == 'fixed'" />
			</div>
		</div>
	</div>
</template>
<script>
// 导入子组件
import NavPart from "./NavPart.vue";
import SearchPart from "./SearchPart.vue";
export default {
	name: "HeaderModel",
	data() {
		return {
			fixed: "static", //"fixed"||"static"
		};
	},
	components: {
		NavPart,
		SearchPart,
	},
	mounted() {
		//滚动
		window.onscroll = this.handelScroll.bind(this); //方法内的this指向
	},
	methods: {
		handelScroll() {
			let sTop = document.documentElement.scrollTop || document.body.scrollTop;
			// 如果滚动大于120，头部固定，小于则头部无定位
			if (sTop >= 120) {
				this.fixed = "fixed";
				// 处理页面高度误差
				document.body.style.paddingTop = "180px";
			} else {
				this.fixed = "static";
				document.body.removeAttribute("style");
			}
		},
	},
};
</script>
<style scoped lang="scss">
.header {
	box-shadow: 3px 3px 10px 2px rgba(0, 0, 0, 0.1);
	margin-bottom: 10px;
	width: 100%;
	background: #fff;
}
.header-top,
.header-bottom {
	display: flex;
	justify-content: space-between;
}
.header-top {
	height: 120px;
	overflow: hidden;
	.logo {
		width: 180px;
		margin-top: 25px;
	}

	.search-1 {
		margin-top: 40px;
	}
}
.header-bottom {
	height: 60px;
	overflow: hidden;
	.search-2 {
		margin-top: 10px;
	}
}
.fixed {
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
}
</style>
